<template>
    <div>
      <!-- <div>
        <el-steps :active="active" align-center finish-status="success">
            <el-step title="重要知识点"></el-step>
            <el-step title="语法"></el-step>
            <el-step title="单词"></el-step>
            <el-step title="作业"></el-step>
            <el-step title="考核情况"></el-step>
            <el-step title="作业情况"></el-step>
        </el-steps>
      </div> -->
      <div style=" padding-right: 5%; ">
        <h3>日期：{{ row.taskDate }} <span style="margin-left: 20px;">班级：{{ row.className }}</span></h3>
      </div>
      <div v-if="type=='1'">
        <el-divider content-position="left" v-if="formData.knowledgePoints">重要知识点</el-divider>
        <!--重要知识点-->
        <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-if="formData.knowledgePoints">
          <div v-html="formData.knowledgePoints" style="overflow-y: auto;"></div>
        </div>
        <el-divider content-position="left" v-if="formData.syntax">语法</el-divider>
        <!--语法-->
        <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-if="formData.syntax">
          <div v-html="formData.syntax" style="overflow-y: auto;"></div>
        </div>
        <el-divider content-position="left" v-if="formData.word">单词</el-divider>
        <!--单词-->
        <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-if="formData.word">
          <div v-html="formData.word" style="overflow-y: auto;"></div>
        </div>
        <el-divider content-position="left" v-if="formData.schoolAsignment">作业</el-divider>
        <!--作业-->
        <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;" v-if="formData.schoolAsignment">
          <div v-html="formData.schoolAsignment" style="overflow-y: auto;"></div>
        </div>
        <div v-if="!formData.knowledgePoints && !formData.syntax && !formData.word && !formData.schoolAsignment" style="text-align: center; font-size: 24px; color: darkgrey;">
          没有任何登记信息
        </div>
      </div>
      <div v-if="type=='2'">
        <!--知识点/语法/单词背诵情况-->
        <el-divider content-position="left">知识点/语法/单词背诵情况</el-divider>
        <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;">
          <el-table :data="reciteStudentList"  v-loading="loading" prop="examStudents" height="250" 
              border   >
                <el-table-column label="编号" align="center" width="80" prop="studentId" />
                <el-table-column width="100"
                  label="学生姓名"
                  align="center"
                  prop="studentName"
                />
                <el-table-column label="考核次数" align="center" width="120" prop="isPass">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.doneNum" placeholder="" disabled>
                      <el-option v-for="i in 6" :key="i" :value="i" :label="'第'+i+'次'"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="是否完成" align="center" prop="isPass">
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.checkState==0" type="danger">未完成</el-tag>
                      <el-tag v-if="scope.row.checkState==1" type="success">已完成</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="helpShow(scope.row)" type="text" size="small">帮扶</el-button>

                  </template>
                </el-table-column>
          </el-table>
        </div>
        <el-divider content-position="left">课后作业检查情况</el-divider>
        <!--课后作业检查情况-->
        <div style="padding-left: 5%; padding-right: 5%; margin-top: 20px;">
          <el-table :data="workCheckStudentList"  v-loading="loading"  height="250">
              <el-table-column label="编号" align="center" prop="studentId" />
              <el-table-column
                label="学生姓名"
                align="center"
                prop="studentName"
              />
              <el-table-column label="是否完成" align="center" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.checkState==0" type="danger">未完成</el-tag>
                  <el-tag v-if="scope.row.checkState==1" type="success">已完成</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                  label="操作"
                  align="center"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="helpShow(scope.row)" type="text" size="small">帮扶</el-button>

                  </template>
                </el-table-column>
          </el-table>
        </div>
      </div>
      
      
      <el-dialog
        title="提示"
        :visible.sync="helpDialogVisible"
        v-if="helpDialogVisible"
        width="30%" append-to-body
        :before-close="handleCloseHelp"
        >
        <classStudentList :row="selectRow" @handleCloseHelp="handleCloseHelp"></classStudentList>
        
      </el-dialog>
    </div>
  </template>
  <script>

import {queryClassStudents} from "@/api/exam/examResultEnter";
import {checkStudentList, workDayDetail} from "@/api/evaluation/day"
import classStudentList from "@/views/evaluation/help/classStudentList"
  export default {
    name: "dayDetail",
    components: {
      classStudentList
    },
    props: {
      type:{
        type: String,
        default: null
      },
      wordId: {
        type: String,
        default: ''
      },
      row:{
        type: Object,
        default:{}
      }
    },
    data() {
      return {
        helpDialogVisible:false,
        loading: true,
        active: 0,
        studentList:[],
        textarea:null,
        formData:{
          id:null,
          reciteStudentList:[],
          workStudentList:[],
          workTypeDictList:[],
          knowledgePoints:'',
          syntax:'',
          word:'',
          className:''
        },
        loading:false,
        reciteStudentList:[],
        //选中学生列表
        selectStuList:[],
        selectRow:null,
        workCheckStudentList:[],
        selectWorkStuList:[],
        checkRow:null
        
      };
    },
    computed: {
      
    },
    created() {
        const id = this.wordId
        if(this.type=='1'){
          workDayDetail({id:id}).then(resp=>{
            this.formData.id = resp.data.id
            // this.formData.reciteStudentList = resp.data.reciteStudentList
            // this.formData.workStudentList = resp.data.workStudentList
            this.formData.className = resp.data.className
            this.formData.knowledgePoints = resp.data.knowledgePoints
            this.formData.syntax = resp.data.syntax
            this.formData.word = resp.data.word
            this.formData.schoolAsignment = resp.data.schoolAsignment
            this.formData.taskDate = resp.data.taskDate

          })
        }
        
        if(this.type=='2'){
          this.row.checkType=1
          this.selectCheckStuList(this.row)
          this.checkRow = JSON.parse(JSON.stringify(this.row))
          this.checkRow.checkType=2
          this.selectCheckStuList(this.checkRow)
        }
        
    
    },
    mounted(){
      
    },
    beforeunload(){
      this.reciteStudentList = []
      this.workStudentList = []
      this.className = ''
    },
    methods: {
      /**关闭帮扶窗口 */
      handleCloseHelp(){
        this.helpDialogVisible = false
      },
      helpShow(row){
        this.selectRow = row
        this.helpDialogVisible= true
      },
      selectCheckStuList(row){
            this.loading = true
            this.selectStuList=[]
            checkStudentList({
              workDayId:row.id,
              checkType:row.checkType
            }).then(resp=>{
              if(row.checkType=='1'){
                this.selectStuList = resp.data
                this.getClassStudent(row)
              }
              if(row.checkType=='2'){
                this.selectWorkStuList = resp.data
                this.getClassStudent(row)
              }
                   
            })
      },
        //通过班级id查找班级学生
      getClassStudent(row) {
        console.log(row)
        this.reciteStudentList=[]
        queryClassStudents({ classId: row.classId }).then((resp) => {
            for (let i = 0; i < resp.data.length; i++) {
            // this.reciteStudentList = resp.data
            if(row.checkType=='1'){
              this.reciteStudentList.push({
                  checkType:this.checkType,
                  doneNum: 1,
                  checkState: "0",
                  remarks:'',
                  studentId: resp.data[i].id,
                  classId: resp.data[i].classId,
                  studentName: resp.data[i].studentName,
                  workDayId:row.id
              });
            }
            if(row.checkType=='2'){
              this.workCheckStudentList.push({
                  checkType:this.checkType,
                  doneNum: 1,
                  checkState: "0",
                  remarks:'',
                  studentId: resp.data[i].id,
                  classId: resp.data[i].classId,
                  studentName: resp.data[i].studentName,
                  workDayId:row.id
              })
              
            }
              
            }

              for(var k=0;k<this.selectStuList.length;k++){
                for(var j=0;j<this.reciteStudentList.length;j++){
                    if(this.selectStuList[k].studentId==this.reciteStudentList[j].studentId){
                    this.reciteStudentList[j]=this.selectStuList[k]
                    }
                }
                
              }
              console.log('reciteStudentList',this.reciteStudentList)

              for(var k=0;k<this.selectWorkStuList.length;k++){
                for(var j=0;j<this.workCheckStudentList.length;j++){
                      if(this.selectWorkStuList[k].studentId==this.workCheckStudentList[j].studentId){
                        this.workCheckStudentList[j]=this.selectWorkStuList[k]
                      }
                  }
              }
              console.log('workCheckStudentList',this.workCheckStudentList)
            
            this.loading = false
        });
        },
        /**查询学生列表 */
        searchStudent(id,checkType){
            checkStudentList({checkType:checkType,workDayId:id}).then(resp=>{
                if(checkType==1){
                    this.reciteStudentList=resp.data
                }
                if(checkType==2){
                    this.workStudentList=resp.data
                }
                
            })
        },
        up(){
            this.active--
            if(this.active==4){
                this.row.checkType=1
                this.reciteStudentList=[]
                this.selectCheckStuList(this.row)
            }
            if(this.active==5){
                
                this.row.checkType=2
                this.reciteStudentList=[]
                this.selectCheckStuList(this.row)
            }
        },
        next(){
            
            if (this.active++ > 5) this.active = 0;
            if(this.active==4){
                this.row.checkType=1
                this.reciteStudentList=[]
                this.selectCheckStuList(this.row)
            }
            if(this.active==5){
                
                this.row.checkType=2
                this.workCheckStudentList=[]
                this.selectCheckStuList(this.row)
            }
        }
    }
  };
  </script>
  